<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="confirm-modal">
      <view class="modal-title">{{ title }}</view>
      <view class="modal-content">
        <template v-if="type === 'appInfo'">
          <view class="app-name">待办清单 v{{ version }}</view>
          <view class="app-desc">一款简洁半成品的待办清单！！！</view>
          <view class="features">
            <view class="feature-title">主要功能：</view>
            <view class="feature-item">• 添加/编辑/删除待办事项</view>
            <view class="feature-item">• 设置任务优先级</view>
            <view class="feature-item">• 支持主题切换</view>
            <view class="feature-item">• 数据本地存储</view>
          </view>
          <view class="developer">
            <view>开发者：吴所谓</view>
            <view>联系方式：3551790059@qq.com</view>
          </view>
        </template>
        
        <template v-else-if="type === 'version'">
          <view class="version-info">
            <view class="version-item">
              <text class="label">当前版本：</text>
              <text class="value">v{{ version }}</text>
            </view>
            <view v-if="hasUpdate" class="version-item">
              <text class="label">最新版本：</text>
              <text class="value">v{{ latestVersion }}</text>
            </view>
            <view class="version-status" :class="{ 'has-update': hasUpdate }">
              {{ hasUpdate ? '发现新版本' : '已是最新版本' }}
            </view>
          </view>
        </template>
      </view>
      <view class="modal-buttons">
        <button 
          v-if="hasUpdate" 
          class="update-btn"
          @tap="handleUpdate"
        >立即更新</button>
        <button class="modal-btn confirm-btn" @click="close">{{ confirmText }}</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'CustomModal',
  props: {
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'appInfo'
    },
    version: {
      type: String,
      default: '1.0.0'
    },
    latestVersion: {
      type: String,
      default: ''
    },
    hasUpdate: {
      type: Boolean,
      default: false
    },
    confirmText: {
      type: String,
      default: '确定'
    }
  },
  methods: {
    show() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    handleUpdate() {
      this.$emit('update')
    }
  }
}
</script>

<style>
.confirm-modal {
  width: 580rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: hidden;
}

.modal-title {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  padding: 30rpx 0 20rpx;
  font-weight: 500;
}

.modal-content {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  padding: 0 40rpx 40rpx;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  border-top: 1rpx solid #EEEEEE;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  border-radius: 0;
  position: relative;
}

.modal-btn::after {
  border: none;
}

.confirm-btn {
  color: #6E8CD5;
}

.modal-btn:active {
  background-color: #F5F5F5;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .confirm-modal {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

@media screen and (max-width: 360px) {
  .confirm-modal {
    width: 520rpx;
  }
  
  .modal-title {
    font-size: 30rpx;
    padding: 24rpx 0 16rpx;
  }
  
  .modal-content {
    font-size: 26rpx;
    padding: 0 32rpx 32rpx;
  }
  
  .modal-btn {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 30rpx;
  }
}

.app-name {
  font-size: 36rpx;
  color: #333;
  text-align: center;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.app-desc {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 40rpx;
}

.features {
  margin-bottom: 40rpx;
}

.feature-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.feature-item {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.developer {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.version-info {
  padding: 20rpx 0;
}

.version-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
  margin-left: 20rpx;
}

.version-status {
  text-align: center;
  font-size: 32rpx;
  color: #67C23A;
  margin-top: 30rpx;
}

.version-status.has-update {
  color: #E6A23C;
}

.update-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #E6A23C;
  color: #FFFFFF;
  font-size: 28rpx;
  border-radius: 40rpx;
}
</style> 